
<html xmlns="http://www.w3.org/1999/xhtml">

<wicket:extend>

    <!-- Sidebar -->

      <div style="position: relative; background-color: #2D475C; float:left; width: 200px; height: 600px;">
        <div style="padding-top: 10px; margin-left: auto; margin-right: auto; width: 176px;"> 
            <img wicket:id="sidebar" src="side-bar.png" border="0" usemap="#Map" />
            <map name="Map" id="Map">
                <area shape="rect" coords="0,32,176,62" wicket:id="AquaponicsPageLink" href="#" />
                <area shape="rect" coords="2,62,175,92" wicket:id="LightingPageLink" href="#" />
                <area shape="rect" coords="1,92,175,122" wicket:id="SecurityPageLink" href="#" />
                <area shape="rect" coords="0,122,175,152" wicket:id="ClimatePageLink" href="#" />
                <area shape="rect" coords="1,153,175,183" wicket:id="WaterPageLink" href="#" />
            </map>
        </div>
        <div style="position: absolute; bottom: 0; padding: 10px;">
            <img wicket:id="logo" src="logo.png"/>
        </div>
      </div>
      
   <!-- AC Charts -->
      
    <div class= "wrapper" style="position: relative; left: 200; height: 609px; width: 800px;">
        <form wicket:id="form">
        
        <div class="ACChartPane" style="position:absolute;z-indez:10;top:340;left:0;">
        <img wicket:id = "ACChart" style="height:250px"/>
        </div>
        
        <div class="HouseChartPane" style="position:absolute;z-indez:10;top:120;left:155;">
        <img wicket:id = "house"/>
        </div>
        
        
        
        <div class="ClimControl" style="padding: 5px; position:absolute;z-indez:100;top:10;left:0; border:2px gray solid; -webkit-border-radius: 10px; -moz-border-radius: 10px;">
            <div align="center"><b><font size="5" color="white"><u>Climate Control</u></font></b></div>
            <span wicket:id="power"> 
              <input type="radio" wicket:id="on"/><font color="green" size="3"><b>ON</b></font>
              <input type="radio" wicket:id="off"/><font color="red" size="3"><b>OFF</b></font>
            </span><br/>
              <font size="2" color="white">
              	<b>Temperature: </b>
              	<input wicket:id="temp" type="text" size="3" maxlength="3" value="80"/> <b>F</b><br/>
              </font>
    
              <font size="2" color="white">
                 <b>Humidity:</b>
                 <input wicket:id="humidity" type="text" size="3" maxlength="3" value="6"/>  <b>%</b><br/>
              </font>
    
              <font size="2" color="white">
                 <b>Ventilation:</b>
                 <input wicket:id="ventilation" type="text" size="3" maxlength="3"value="10"/> <b>%</b><br/>
              </font>
     
              <font size="2" color="white">
                 <b>Timer:</b>
                 <input wicket:id="timer" type="text" size="3" maxlength="3"value="10"/> <b>mins</b><br/>
              </font>
    
              <div align="center"><input wicket:id="change" type="submit" value="Change"/></div>
        
        </div>
        
        
        <div class="EnrgConsumption" style="padding: 5px; position:absolute;z-indez:100;top:10;left:250; border:2px gray solid; -webkit-border-radius: 10px; -moz-border-radius: 10px;">
              <div align="center"><b><font size="5" color="white"><u>Energy Consumption</u></font></b></div>
    
              <font size="2" color="white">
                 <b>Current Consumption:</b>
              </font>
              <font color="orange">
                 <b><span wicket:id="currConsump">[Cosumption will go here]</span></b><br/>
              </font>
    
              <font size="2" color="white">
                 <b>Approx. Cost:</b>
              </font>
              <font color="orange">
                 <b><span wicket:id="approxCost">[Cost will go here]</span></b><br/>
              </font>
        </div>
        
        
        
        
        <div class="AirMonitor" style="padding: 5px; position:absolute;z-indez:100;top:10;left:550; border:2px gray solid; -webkit-border-radius: 10px; -moz-border-radius: 10px;">
              <div align="center"><b><font size="5" color="white"><u>Air Quality Monitor</u></font></b></div>
              <font size="2" color="white">
                 <b>Air Exchange Rate:</b>
              </font>
              <font color="green">
                 <b><span wicket:id="airExRate">[rate will go here]</span></b><br/>
              </font>
    
              <font size="2" color="white">
                 <b>Outside Air Quality:</b>
              </font>
              <font color="#1c882e">
                 <b><span wicket:id="outAirQual">[Qual will go here]</span></b><br/>
              </font>
    
              <font size="2" color="white">
                 <b>Inside Air Quality:</b>
              </font>
              <font color="#105a1c">
                 <b> <span wicket:id="inAirQual">[Qual will go here]</span></b><br/>
              </font>
        </div>
        
        <div class="EnrgBudget" style="padding: 5px; position:absolute;z-indez:100;top:150;right:0; border:2px gray solid; -webkit-border-radius: 10px; -moz-border-radius: 10px;">
              <div align="center"><b><font size="5" color="white"><u>Energy Budget</u></font></b></div>
    
              <font size="2" color="white">
                 <b>Budget Remaining:</b>
              </font>
              <font color="orange">
                 <b> <span wicket:id="budgetRem">[Budget will go here]</span> KWH</b><br/>
              </font>
    
              <font size="2" color="white">
                 <b>Time Remaining:</b>
              </font>
              <font color="orange">
                 <b><span wicket:id="timeRem">[Time will go here]</span> mins</b><br/>
              </font>   
        </div>
    
        </form>
    </div>
</wicket:extend>
</html>
